<template>
  <div class="mask">
    <div class="pop-table">
      <div class="pop-table-style">
        <div class="tit">预警统计</div>
          <el-table
            :data="data"
            style="width: 100%" class="list">
            <el-table-column
              type="index"
              label="序号"
              width="50">
            </el-table-column>
            <el-table-column
              prop="yjdx"
              label="预警对象"
              width="80">
            </el-table-column>
            <el-table-column
              prop="yjmc"
              label="预警名称"
              width="270">
            </el-table-column>
            <el-table-column
              prop="yjsl"
              label="预警数量(个)"
              width="120">
            </el-table-column>
            <el-table-column
              prop="dcqd"
              label="调查启动次数(次)"
              width="130">
            </el-table-column>
            <el-table-column
              prop="fxwt"
              label="发现问题比（%）"
              width="140">
            </el-table-column>
          </el-table>

          <el-pagination
             :page-size="5"
              layout="prev, pager, next"
              :total="10">
            </el-pagination>
        <div class="close" @click="isClose()"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {},
  data() {
    return {
       data: [
          {
            index: 1,
            yjdx: "商业企业",
            yjmc: "需求预测与实际执行偏离异常预警",
            yjsl: 34,
            dcqd: 17,
            fxwt: 50,
          },
          {
            index: 2,
            yjdx: "商业企业",
            yjmc: "需求预测提报异常预警",
            yjsl: 24,
            dcqd: 12,
            fxwt: 50,
          },
          {
            index: 3,
            yjdx: "商业企业",
            yjmc: "敏感品规需求预测异常预警",
            yjsl: 46,
            dcqd: 23,
            fxwt: 50,
          },
          {
            index: 4,
            yjdx: "商业企业",
            yjmc: "退市品规清库异常预警",
            yjsl: 62,
            dcqd: 31,
            fxwt: 50,
          },
          {
            index: 5,
            yjdx: "商业企业",
            yjmc: "未按市场状态组织货源预警",
            yjsl: 24,
            dcqd: 12,
            fxwt: 50,
          },
          // {
          //   index: 6,
          //   yjdx: "商业企业",
          //   yjmc: "月度协议执行异常预警",
          //   yjsl: 12,
          //   dcqd: 6,
          //   fxwt: 50,
          // },
          // {
          //   index: 7,
          //   yjdx: "商业企业",
          //   yjmc: "商业无合同购入预警",
          //   yjsl: 34,
          //   dcqd: 17,
          //   fxwt: 50,
          // },
          // {
          //   index: 8,
          //   yjdx: "商业企业",
          //   yjmc: "需求预测提报异常预警",
          //   yjsl: 24,
          //   dcqd: 12,
          //   fxwt: 50,
          // },
          // {
          //   index: 9,
          //   yjdx: "商业企业",
          //   yjmc: "新入网客户档位设置异常预警",
          //   yjsl: 36,
          //   dcqd: 18,
          //   fxwt: 50,
          // },
          // {
          //   index: 10,
          //   yjdx: "商业企业",
          //   yjmc: "集中客户投放预警",
          //   yjsl: 46,
          //   dcqd: 23,
          //   fxwt: 50,
          // },
        ],
    };
  },
  components: {},
  mounted() {},
  beforeDestroy() {},
  methods: {
    isClose() {
      this.$emit("isHide", false);
    },
  },
};
</script>

<style lang="scss" scoped>
.mask {
  width: 100%;
  height: 100%;
  position: relative;
  .pop-table {
    width: 900px;
    height: 474px;
    background: url(../../assets/img/ng-bg-alter.png) no-repeat;
    background-size: 100% 100%;
    padding-left: 38px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .pop-table-style {
      width: 100%;
      height: 474px;
      box-sizing: border-box;
      padding: 70px 21px 30px 21px;
      overflow:hidden;
      position: relative;
      .tit{
        
        position: absolute;
        top: 45px;
        left:50%;
        transform: translateX(-75%);
        font-size: 16px;
        // font-family: Source Han Sans CN;
        font-family: MicrosoftYaHei;
        font-weight: bold;
        color: #FFFFFF;
      }
      .close {
        width: 100px;
        height: 100px;
        position: absolute;
        top: 0;
        right: 0;
      }
    }
  }
}
::v-deep .el-table{
  width:464px;
  height:325px;
  color:RGBA(255, 255, 255, 0.8);
}
::v-deep .el-table tr{
  background-color:RGBA(255, 255, 255, 0);
}
::v-deep .el-table td.el-table__cell, ::v-deep .el-table th.el-table__cell.is-leaf{
  border:none;
  background-color:RGBA(255, 255, 255, 0);

}
::v-deep .el-table, .el-table__expanded-cell{
  background-color:RGBA(255, 255, 255, 0);
}
::v-deep .el-table__header ,::v-deep .el-table__header thead ,::v-deep .el-table__header thead tr{
  color:#fff;
   background-color:RGBA(255, 255, 255, 0);

}
::v-deep .el-table__header {
  color:#fff;
  width:464px !important;
}
::v-deep .el-table__header thead tr{
  background-color:#07185C;
}
::v-deep .el-pagination{
  float: right;
  margin-right:25px;
  height:22px;
  margin-top:10px;
}
::v-deep .el-pagination button:disabled,::v-deep .el-pager li,.btn-next,::v-deep .el-pagination .btn-next,::v-deep  .el-pagination .btn-prev{
  background:none;
  border:1px solid #747693;
  color:RGBA(255, 255, 255, 0.8);
  border-radius:4px;
  margin-right:5px;
  
}
::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell{
  background-color:RGBA(255, 255, 255, 0);
}
::v-deep .el-pager li.active+li{
  border:1px solid #747693;
}
::v-deep .el-table::before{
  height:0;
}
::v-deep .el-table .cell{
  padding:5px 10px;
}
</style>